import { Suspense } from "react";
// 引入路由
import { Switch, Route, Redirect } from "react-router-dom";

// 配置路由视图
const RouterView = ({ routes }) => {
  if (!routes) return null;

  // 获取列表
  const routers = routes.filter((item) => item.component);
  const redirects = routes.filter((item) => !item.component);

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Switch>
        {routers.map((item) => (
          <Route
            key={item.path}
            path={item.path}
            render={(routerProps) => {
              document.title=item.meta?.title;
              return (
                <item.component {...routerProps} routes={item.child || []} />
              );
            }}
          />
        ))}
        {redirects.map((item) => (
          <Redirect from={item.from} key={item.from} to={item.to} />
        ))}
      </Switch>
    </Suspense>
  );
};

export default RouterView;
